<template>
  <div id="home" ref="home">
      <NavBar class="home-navbar">
          <template v-slot:center>
              <h3>购物车</h3>
          </template>
      </NavBar>
      <TabControl class="tabcontrol1" ref="TabControl1" :titles="['流行','最新','热卖']"  v-on:tabClick="tabClick" v-show="isTabControl"></TabControl>
      <PublicScroll ref="scroll"
                    v-bind:probeType="3"
                    v-bind:pullUpLoad="true"
                    @scrollY="changeIsShow"
                    @loadMore="loadMore">
          <!--      轮播图-->
          <SwiperArea :banners="banners" @swiperImageLoad="swiperImageLoad"></SwiperArea>
          <!--      <HomeSwiper :banners="banners"></HomeSwiper>-->
          <!--      recommend-->
          <HomeRecommendView :recommends="recommends"></HomeRecommendView>
          <!--      本周热门-->
          <FeatureView></FeatureView>
          <TabControl class="tabcontrol" :titles="['流行','最新','热卖']" v-on:tabClick="tabClick" ref="TabControl"></TabControl>
          <GoodsList :goods="goodslist"></GoodsList>
      </PublicScroll>
      <BackTop v-on:click.native="backStart" v-show="isShow"></BackTop>
  </div>
</template>
<script>
import NavBar from "@/components/common/navbar/NavBar";
import SwiperArea from "@/components/common/swiper/SwiperArea";
import PublicScroll from "@/components/common/scroll/PublicScroll";

import TabControl from "@/components/content/tabControl/TabControl";
import GoodsList from "@/components/content/goods/GoodsList";
import BackTop from "@/components/content/backTop/BackTop";

import HomeRecommendView from "@/views/home/childComps/HomeRecommendView";
import FeatureView from "@/views/home/childComps/FeatureView";

import {debounce} from "@/common/doudong"
import {backTop} from "@/common/hunru";

import {getHomeMultidata,getHomeGoods} from "@/network/home"

export default {
    name: "MyHome",
    data(){
        return{
            isTabControl:false,
            banners:[],
            recommends:[],
            goods:{
                pop:{page:0,list:[]},
                new:{page:0,list:[]},
                sell:{page:0,list:[]},
            },
            currentType:'pop',
            tabControlTop:0,
            sY:0,
            clearRefresh:null,
            sY1:0
        }
    },
    mixins:[backTop],
    computed:{
        goodslist:{
            get(){
                return this.goods[this.currentType].list
            }
        }
    },
    mounted() {
        this.getHomeMultidata()
        this.getHomeGoods('pop')
        this.getHomeGoods('new')
        this.getHomeGoods('sell')
        const refresh=debounce(this.$refs.scroll.scrollRefresh,50)
        this.clearRefresh=()=>{
            refresh()
        }
        this.$bus.$on('itemImageLoad',this.clearRefresh)
    },
    methods:{
        swiperImageLoad(){
            this.tabControlTop=this.$refs.TabControl.$el.offsetTop
        },
        changeIsShow(value){
          this.isShow= -value > 200
            if(-value>0){
                this.isTabControl=-value+35> this.tabControlTop
            }
          this.sY=value
        },
        loadMore(){
            this.getHomeGoods(this.currentType)
            this.$refs.scroll.bs&&this.$refs.scroll.scrollRefresh()
        },
        tabClick(index){
            switch (index){
                case 0:
                    this.currentType='pop'
                    break
                case 1:
                    this.currentType='new'
                    break
                case 2:
                    this.currentType='sell'
                    break
            }
            this.$refs.TabControl.currentIndex=index
            this.$refs.TabControl1.currentIndex=index
        },
        getHomeMultidata(){
            getHomeMultidata().then(
                res=>{
                    this.banners=res.data.banner.list
                    this.recommends=res.data.recommend.list
                },
            )
        },
        getHomeGoods(type){
            const page=this.goods[type].page+1
            getHomeGoods(type,page).then(res=>{
                this.goods[type].list.push(...res.data.list)
                this.goods[type].page+=1
                this.$refs.scroll.finishPullUp()
            })
        },
    },
    components:{
        NavBar,SwiperArea,PublicScroll,
        TabControl,GoodsList,BackTop,
        HomeRecommendView,FeatureView,
    },
    activated(){
        this.$refs.scroll.scrollTo(0,this.sY1)
        this.$refs.scroll.scrollRefresh() //再此刷新防止bug
    },
    deactivated() {
        this.sY1=this.sY
        this.$bus.$off('itemImageLoad',this.clearRefresh)
    }
  }
</script>
<style scoped>
#home{
    padding-top:44px;
    padding-bottom: 50px;
    height: 100vh;
}
.home-navbar{
    background-color: pink;
    color: white;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
}
.tabcontrol1{
    position: fixed;
    z-index: 5;
    right: 0;
    left: 0;
    background: white;
}
h3{
    line-height: 44px;
    font-size: 16px;
}
</style>
